@tailwind base;
@tailwind components;
@tailwind utilities;
.bodyPad {
    @apply overflow-y-scroll w-full h-full;
}

.headPad {
    @apply flex flex-col text-white bg-sky-400 sticky top-0 w-full;
}

.headPad div {
    @apply leading-7;
}

.headPad input {
    @apply w-full;
}

.mainPad {
    /*border: 1px solid red;*/
    height: 91vh;
    overflow: scroll;
    @apply relative;
}

.barPad {
    @apply flex flex-row h-16 justify-center content-center items-center border border-solid border-gray-300 shadow-lg bottom-0 sticky;
}

.barPad a {
    @apply basis-1/4 text-center;
}


/*图标字体大小*/

.barPad i {
    @apply text-2xl;
}

.cataMenu {
    @apply my-5 px-3 text-center;
}

.cataMenu img {
    @apply w-14;
}

.focus {
    @apply relative overflow-hidden;
}

.focus img {
    @apply w-full
}

.focus ul {
    width: 500%;
    margin-left: -100%;
    @apply overflow-hidden
}

.focus ul li {
    @apply float-left w-1/5
}

.focus ol {
    @apply absolute bottom-2 right-4 m-0
}

.focus ol li {
    transition: all .2s;
    @apply inline-block w-2 h-2 bg-white rounded-full
}

.focus ol li.current {
    @apply w-4 bg-red-400
}

.titlePad {
    @apply text-center flex items-center justify-center
}

.titlePad span {
    @apply inline-block w-8 h-px mx-4 bg-slate-500;
}

.searchBar {
    @apply grid grid-cols-4 gap-x-8
}

.businessCard {
    @apply flex flex-row m-1 shadow-lg space-x-1
}

.businessCard img {
    @apply h-20
}

.businessBar {
    @apply flex flex-col space-y-1
}

.businessCard .businessBar .fa-star {
    @apply text-yellow-400;
}

.header {
    @apply bg-blue-400 text-center text-white py-2
}

.menu {
    @apply relative flex flex-row m-1 p-1 border-b-2 border-gray-200
}

.menu img {
    @apply h-20
}

.menuBar {
    @apply flex flex-col space-y-1 ml-2
}

.newBox {
    top: -1.7rem;
    left: -1.7rem;
    border: 2rem solid #000;
    border-right-color: rgb(21, 201, 21);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    @apply absolute transform rotate-45
}

.new {
    top: 0.6rem;
    left: 0.3rem;
    @apply absolute text-white z-50 transform -rotate-45 text-sm
}

.num {
    top: 0rem;
    left: 4.3rem;
    background: red;
    @apply absolute text-white text-sm text-center w-5 h-5 rounded-full
}

.store {
    @apply relative flex flex-col items-center justify-center
}

.storeBar {
    @apply relative
}

.store img {
    @apply w-32
}

.store .newBox {
    top: -2rem;
    left: -2rem;
}

.store .new {
    top: 0.4rem;
}

.footer {
    @apply relative grid grid-cols-3 h-16
}

.footer .money {
    @apply col-span-2 bg-gray-400 text-white pl-24
}

.footer .settlement {
    @apply flex justify-center items-center text-white bg-green-400 h-full font-bold
}

.footer img {
    @apply absolute left-2 -top-6 w-20
}

.money .num {
    @apply -top-6 left-14 z-50
}

.order {
    @apply absolute right-2 top-8
}

.moneyBar {
    @apply col-span-2 flex justify-center items-center p-0  bg-gray-400 text-white font-bold
}

.customer {
    @apply bg-blue-500 text-white p-1
}

.customer i {
    @apply absolute right-2
}

.businessStore {
    @apply p-2 font-bold border-b-2
}

.quantity {
    @apply relative flex justify-center items-center p-2
}

.right {
    @apply absolute right-2
}

.mon {
    @apply top-2
}

.menu .orderImg img {
    @apply h-8
}

.mainPad .bor {
    @apply border-0
}

.btnBar {
    @apply flex items-center justify-center
}

.btn {
    @apply bg-green-400 w-11/12 p-2 text-white rounded text-center
}

.reg {
    @apply w-11/12 p-2 my-4 rounded bg-gray-200 text-center
}